<div class="white-bg padding-top-lg ">
    <div class="padding margin-top">
        <div class="">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">应用名称：</label>
                                <label class="">{{appServiceControlInfo.asName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">副本数：</label>
                                <label class="">{{appServiceControlInfo.asCount}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">状态：</label>
                                <label class="">{{appServiceControlInfo.stateName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">镜像：</label>
                                <label class="">{{appServiceControlInfo.imagesName}}:{{appServiceControlInfo.imagesVersion}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">主机组/主机：</label>
                                <label class="">{{appServiceControlInfo.hostGroupName}}{{appServiceControlInfo.hostName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">服务类型：</label>
                                <label class="">{{_getAsType(appServiceControlInfo.asType)}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">应用组：</label>
                                <label class="fix-width">{{appServiceControlInfo.avgName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group" v-if="appServiceControlInfo.asId">
                                <button class="btn-white btn btn-xs" v-on:click="_goBack()">返回</button>
                                <button class="btn-white btn btn-xs" v-on:click="_editAppService()">修改</button>
                                <button class="btn-primary btn btn-xs" v-if="appServiceControlInfo.state == '10012'" v-on:click="_startAppService()">启动</button>
                                <button class="btn-primary btn btn-xs" v-else v-on:click="_stopAppService()">停止</button>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">说明:</label>
                                <label class="">{{appServiceControlInfo.asDesc}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="vc-line margin-top-xs"></div>
        <div class="margin-top">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link" v-bind:class="{active:appServiceControlInfo._currentTab == 'appServiceControlPort'}" v-on:click="changeTab('appServiceControlPort')">端口映射</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" v-bind:class="{active:appServiceControlInfo._currentTab == 'appServiceControlDir'}" v-on:click="changeTab('appServiceControlDir')">磁盘映射</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" v-bind:class="{active:appServiceControlInfo._currentTab == 'appServiceControlHosts'}" v-on:click="changeTab('appServiceControlHosts')">hosts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" v-bind:class="{active:appServiceControlInfo._currentTab == 'appServiceControlVar'}" v-on:click="changeTab('appServiceControlVar')">环境变量</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" v-bind:class="{active:appServiceControlInfo._currentTab == 'appServiceControlContainer'}" v-on:click="changeTab('appServiceControlContainer')">docker容器</a>
                </li>
            </ul>
        </div>
        <div v-if="appServiceControlInfo._currentTab == 'appServiceControlPort'">
            <vc:create path="admin/appServiceControlPort"></vc:create>
        </div>
        <div v-if="appServiceControlInfo._currentTab == 'appServiceControlDir'">
            <vc:create path="admin/appServiceControlDir"></vc:create>
        </div>
        <div v-if="appServiceControlInfo._currentTab == 'appServiceControlHosts'">
            <vc:create path="admin/appServiceControlHosts"></vc:create>
        </div>
        <div v-if="appServiceControlInfo._currentTab == 'appServiceControlVar'">
            <vc:create path="admin/appServiceControlVar"></vc:create>
        </div>
        <div v-if="appServiceControlInfo._currentTab == 'appServiceControlContainer'">
            <vc:create path="admin/appServiceControlContainer"></vc:create>
        </div>

        <vc:create path="admin/editAppService"></vc:create>
    </div>
</div>